<template>
  <div class="app-container">
    <div class="to">
      <span @click="fresh">{{ form.name }}</span>
      <span style="float: right;margin-right: 1mm;margin-top: 1mm;">
        <i v-if="!voice" @click="voice=!voice" class="el-icon-video-pause"></i>
        <i v-else @click="voice=!voice" class="el-icon-video-play"></i>
      </span>
      <span style="float: right;margin-right: 10mm;">得分：{{ score }}</span>
      <span style="float: right;margin-right: 2vw;" :style="{color:countdown<4?'red':'green'}">
      {{ countdown }}秒</span>
    </div>
    <div id="con" style="margin: 10mm 5mm;">
      <div v-for="(q,index) in questionList" :id="index" style="font-size: 15mm;line-height: 28mm;">
        <span style="float: left;">{{ q[1] }}</span>
        <span style="float: left;margin: 0 2mm;"><dict-tag :options="dict.type.math_symbol" :value="q[0]"/></span>
        <span style="float: left;">{{ q[2] }}=</span>
        <span style="float: left;" :style="{color:q[5]?(q[3]==q[4]?'green':'red'):'black'}">{{ q[4] }}</span>
        <div style="clear: both;"></div>
      </div>
    </div>
    <div style="height: 80mm;width: 100%;"></div>
    <div class="bo">
      <el-button :disabled="dis" v-for="i in 9" style="float: left;width: 33.3%;margin: 0;height: 15mm;font-size: 10mm;"
                 type="primary" @click="an(i)">{{ i }}
      </el-button>
      <el-button :disabled="dis" style="float: left;width: 33.3333%;margin: 0;height: 15mm;font-size: 6mm;"
                 type="primary" @click="reset">重置
      </el-button>
      <el-button :disabled="dis" style="float: left;width: 33.3333%;margin: 0;height: 15mm;font-size: 10mm;"
                 type="primary" @click="an(0)">0
      </el-button>
      <el-button :disabled="dis" style="float: left;width: 33.3333%;margin: 0;height: 15mm;font-size: 6mm;"
                 type="primary" @click="submit">确定
      </el-button>
    </div>
  </div>
</template>

<script>
import {getFastmath} from "@/api/base/fastmath";
import Vue from 'vue';

export default {
  name: "Fastmath",
  dicts: ['math_symbol'],
  data() {
    return {
      fastmathId: null,
      form: {},
      score: 0,
      questionList: [],
      q: 0,
      countdown: 60,
      timer: null,
      dis: false,
      voice: false
    };
  },
  created() {
    this.fastmathId = this.$route.params && this.$route.params.fastmathId;
    this.getData();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getData() {
      getFastmath(this.fastmathId).then(response => {
        this.form = response.data;
        this.form.symbol = this.form.symbol.split(",");
        this.buildQuestion();
        this.daojishi();
      });
    },
    buildQuestion() {
      this.questionList = [];
      for (let i = 0; i < this.form.num; i++) {
        let suiji = Math.floor(Math.random() * Math.floor(this.form.symbol.length));
        let symbol = this.form.symbol[suiji];
        let ti = [];
        if (symbol == "1") {//加
          let n1 = this.randomNum(this.form.digit);
          let n2 = this.randomNum(this.form.digit);
          let n3 = (n1 > n2) ? (n1 - n2) : (n2 - n1);
          if (n1 > n2) {
            ti = [symbol, n3, n2, n1];
          } else {
            ti = [symbol, n3, n1, n2];
          }
        }
        if (symbol == "2") {//减
          let n1 = this.randomNum(this.form.digit);
          let n2 = this.randomNum(this.form.digit);
          let n3 = (n1 > n2) ? (n1 - n2) : (n2 - n1);
          if (n1 > n2) {
            ti = [symbol, n1, n2, n3];
          } else {
            ti = [symbol, n2, n1, n3];
          }
        }
        if (symbol == "3") {//乘
          let n1 = this.randomNum(this.form.digit - 1);
          let n2 = this.randomNum(this.form.digit - 1);
          let n3 = n1 * n2;
          ti = [symbol, n1, n2, n3];
        }
        if (symbol == "4") {//除
          let n1 = this.randomNum(this.form.digit - 1);
          let n2 = this.randomNum(this.form.digit - 1);
          let n3 = n1 * n2;
          ti = [symbol, n3, n2, n1];
        }
        this.questionList.push(ti);
      }
    },
    randomNum(digit) {
      return 1 + Math.floor(Math.random() * Math.floor(Math.pow(10, digit) - 1));
    },
    an(i) {
      this.playSound();
      let xu = this.questionList[this.q];
      if (!xu[5]) {
        if (xu[4]) {
          xu[4] = xu[4] * 10 + i;
        } else {
          xu[4] = i;
        }
        Vue.set(this.questionList, this.q, xu);
      }
    },
    reset() {
      let xu = this.questionList[this.q];
      if (!xu[5]) {
        xu[4] = null;
        Vue.set(this.questionList, this.q, xu);
      }
    },
    submit() {
      let xu = this.questionList[this.q];
      if (xu[4] !== undefined && !xu[5]) {
        xu[5] = 1;
        Vue.set(this.questionList, this.q, xu);
        if (xu[3] == xu[4]) {
          this.score++
        }
        if (this.q >= this.questionList.length - 1) {
          return;
        }
        this.q++;
        let ele = document.getElementById((this.q - 2) + "");
        if (ele) {
          ele.scrollIntoView({behavior: "smooth"});
        }
      }
    },
    daojishi() {
      this.countdown = this.form.countdown;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.dis = true;
        }
      }, 1000);
    },
    fresh() {
      window.location.reload();
    },
    playSound() {
      if (!this.voice) return;
      let context = new AudioContext();
      let oscillator = context.createOscillator();
      let gainNode = context.createGain();

      oscillator.connect(gainNode);
      gainNode.connect(context.destination);

      // 设置音量
      gainNode.gain.setValueAtTime(1, context.currentTime);

      // 设置正弦波形参数
      oscillator.type = 'sine';
      oscillator.frequency.value = 840;

      // 开始播放
      oscillator.start();

      // 设置1秒后停止
      setTimeout(function () {
        oscillator.stop();
      }, 200);
    }
  }
};
</script>
<style>
.app-container {
  margin: 0;
  padding: 0;
}

.to {
  font-size: 5mm;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 3mm;
  height: 15mm;
  background-color: #fff;
  border-bottom: 1px solid #cccccc;
}

.bo {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
}
</style>
